<template>
    <div class="qilin-booksDetail">
        <div class="qilin-booksDetail-item" v-for="item in imageList" :key="item.src" @click="showBookDaTa(item)">
            <img :src="item.src" alt="">
            <p class="single-ellipsis">{{item.title}}</p>
            <p>{{item.date}}</p>
        </div>
    </div>
    <el-dialog v-model="dialogConfig.isShow" :title="dialogConfig.title" width="600" :before-close="handleClose">
        <div class="qilin-image-box">
            <el-image 
                style="width:100%;height:250px;"
                :src="dialogConfig.src"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[dialogConfig.src]"
                :initial-index="0"
                fit="fill"
            ></el-image>
            <p class="single-ellipsis">{{dialogConfig.detail}}</p>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data(){
        return {
            imageList:[
                {
                    src:require("@/assets/images/image02.jpg"),
                    title:"书籍是更高等的人类，也是唯一能寄言于未来的人类",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image03.jpeg"),
                    title:"书籍是人类知识的总结。书籍是全世界的营养品",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image04.jpeg"),
                    title:"书，以是哺育心灵的母乳，启迪智慧的钥匙",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image05.jpeg"),
                    title:"书籍是人类知识的总结。书籍是全世界的营养品",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image06.jpeg"),
                    title:"书，是人类共同的精神财富，是人类进步的阶梯。书，以是哺育心灵的母乳，启迪智慧的钥匙。阅读一切好书如同和过去最杰出的人谈话",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image07.jpg"),
                    title:"书并不以用处告人，用书之智不在书中，而在书外，全凭观察得之",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image08.jpeg"),
                    title:"书籍的使命是帮助人们认识生活，而不是代替思想对生活的认识",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image09.jpeg"),
                    title:"书籍是生活的加速器",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image10.jpeg"),
                    title:"书是这一代对下一代精神上的遗训",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image11.jpg"),
                    title:"书是我们这个时代的生命。好的书籍是最贵重的珍宝",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image12.jpeg"),
                    title:"每一本书都有它自己遭遇和寿命。有书毁于一旦，有书却能流芳百世",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image13.jpeg"),
                    title:"书和人一样，也是有生命的一种现象，它也是活的、会说话的东西",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image14.jpeg"),
                    title:"书是世界宝贵财富，是国家和历史的优秀遗产",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image15.jpeg"),
                    title:"只有书背与封面才是那本书最好的部分",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image16.jpeg"),
                    title:"爱护书籍吧，它是知识的源泉",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image17.jpeg"),
                    title:"书籍是人类进步的阶梯，终生的伴侣，最诚挚的朋友",
                    date:"2023-05-03 15:17:29"
                },
                {
                    src:require("@/assets/images/image18.jpeg"),
                    title:"想的书籍是聪明的钥匙",
                    date:"2023-05-03 15:17:29"
                }
            ],
            dialogConfig:{ //弹窗配置项
                isShow:false,
                title:"图书详细信息",
                src:null,
                detail:""
            }
        }
    },
    methods:{
        // 点击查看图书详细信息事件监听
        showBookDaTa(item){
            this.dialogConfig.isShow=true;
            this.dialogConfig.src=item.src;
            this.dialogConfig.detail=item.title;
        },
        // 关闭图书详细信息弹窗事件监听
        handleClose(){
            this.dialogConfig.isShow=false;
        }
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-booksDetail{
    width:100%;
    height:100%;
    display:flex;
    flex-flow:row wrap;
    margin-bottom:20px;
    >.qilin-booksDetail-item{
        width:30%;
        margin:0 1.6% 20px;
        >img{
            width:100%;
            height:200px;
            border-radius:10px;
        }
        >p:first-of-type{
            color:$normal-text-color;
            padding:5px 0;
        }
        >p:last-child{
            color:$color-text-support;
        }
    }
}
.qilin-image-box{
    position:relative;
    >p{
        position:absolute;
        bottom:3px;
        left:0;
        width:100%;
        background-color:rgba(0,0,0,0.4);
        color:#fff;
        padding:10px 5px;
        cursor:pointer;
    }
}
</style>
